<template>
  <view class="jiuzhenren">
    <view
      class="item"
      @click="jiuzhenInfo(item)"
      v-for="(item, index) in list"
      :key="index"
    >
      <view class="left">
        <view class="name">{{ item.name }}</view>
        <view class="tag">{{ item.relation }}</view>
      </view>
      <view class="right">
        <text>{{ item.sex }}</text>
        <text>{{ item.age }}岁</text>
        <text>{{ item.phone }}</text>
      </view>
    </view>
    <view class="kong"></view>
    <view class="footer">
      <button @click="cancel">取消</button>
      <button @click="subMit">添加就诊人</button>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue";
import { api } from "../../api/api";
import type { get_patientT } from "../../types/type";
// 获取数据
const list = ref<get_patientT[]>([]);
const getList = async () => {
  const res: any = await api.get_patient();
  console.log(res);
  list.value = res.data;
};
onMounted(() => {
  getList();
});
// 取消返回上一页面
const cancel = () => {
  uni.navigateBack({
    delta: 1,
  });
};
const subMit = () => {
  uni.navigateTo({
    url: "/navPage/addJiuzhen/addJiuzhen",
  });
};
const jiuzhenInfo = (item: get_patientT) => {
  uni.setStorageSync("jiuzhenInfo", item);
  uni.navigateBack({
    delta: 1,
  });
};
</script>

<style lang="scss" scoped>
.jiuzhenren {
  width: 100vw;
  height: 100vh;
  background-color: #f7f7f7;
  overflow: hidden;
  .item {
    width: 100%;
    padding: 30rpx;
    box-sizing: border-box;
    background-color: #fff;
    margin: 20rpx 0;
    line-height: 60rpx;
    .left {
      display: flex;
      align-items: center;
      .name {
        font-weight: 600;
        font-size: 35rpx;
        margin-right: 20rpx;
      }
      .tag {
        background-color: #dcf1fc;
        color: #2c76ef;
        padding: 5rpx 10rpx;
        box-sizing: border-box;
      }
    }
    .right {
      color: #999;
      font-size: 28rpx;
      text {
        margin-right: 20rpx;
        // margin-top: 30epx;
      }
    }
  }
  .footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    height: 200rpx;
    background-color: #fff;
    justify-content: space-around;
    button:first-child {
      background-color: #e8f2fe;
      color: #2c76ef;
      width: 250rpx;
    }
    button:last-child {
      background-color: #2c76ef;
      color: #fff;
      width: 250rpx;
    }
  }
  .kong {
    height: 200rpx;
  }
}
</style>
